<template>
  <div>
    <div class="operations">
    
    </div>
    <div class="card mb-3 mx-3">
      <div class="text-muted p-3 pb-0">系统权限列表
        <router-link class="link" to="/permission/alt">(样式二)</router-link>
      </div>
      <div class="flex-middle px-3 mb-3">
        <div class="btn-group btn-group-sm">
          <span class="btn btn-outline-secondary" title="expandAll">展开全部</span>
          <span class="btn btn-outline-secondary" title="collapseAll">折叠全部</span>
        </div>
        <router-link class="ml-auto" to="/permission/new"><span class="img-btn">┼</span> 新增权限</router-link>
      </div>
      <table class="table table-advanced table-hover treetable" ref="treetable">
        <thead>
        <tr>
          <th>名称</th>
          <th class="d-none d-md-table-cell">编码</th>
          <th class="d-none d-xl-table-cell">优先级</th>
          <th class="text-xs-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr :data-id="item.id" :data-parent="item.parent" v-for="(item) in items" :key="item.id">
          <td>
            <a class="link"><i :class="item.iconClass"></i>{{item.name}}</a>
          </td>
          <td class="d-none d-md-table-cell">{{item.code}}</td>
          <td class="d-none d-xl-table-cell">{{item.seq}}</td>
          <td class="text-xs-center">
            <a class="badge badge-secondary font-sm"><i class="fa fa-pencil"></i> 编辑</a>
            <a class="d-none d-md-inline-block badge badge-light font-sm"><i
                class="fa fa-angle-double-down"></i> 添加下级
            </a>
            <a class="d-none d-md-inline-block badge badge-light text-danger font-sm"><i class="fa fa-trash-o"></i>删除</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import Menu from '@/api/system/menu'
  import {treeify} from '@/ui/misc'
  import {getStore, setStore} from '@/ui/common/helper/store'

  var expanded = getStore('menu_expandeds');
  expanded = expanded ? JSON.parse(expanded) : {}

  export default {
    name: "tree-tables",
    data: () => ({
      items: []
    }),
    beforeRouteEnter(to, from, next) {
      Menu.list().then(response => {
        next(vm => {
          vm.items = response.data.obj
          vm.$nextTick(() => {
            vm.$treetable = treeify(vm.$refs.treetable, expanded)
          })
        })
      })
    },
    methods: {
      toggle(e) {
        var target = e.target
        var next = target.previousElementSibling || target.nextElementSibling
        target.classList.add('active')
        next.classList.remove('active')
        this.$treetable[e.target.title]()
      },
    },
    destroyed() {
      setStore('menu_expandeds', JSON.stringify(expanded))
    }
  }
</script>

<style scoped>

</style>